import React, { useState, useEffect } from 'react';
import { get } from '@/lib/request';
import {
    Tabs,
    TabsContent,
    TabsList,
    TabsTrigger,
} from "@/components/ui/tabs"
import {
    TooltipProvider
} from "@/components/ui/tooltip"
import FundsCalendar from './FundsCalendar';
import FundsHeader from './FundsHeader';
import FundsIntro from './FundsIntro';
import FundsDetails from './FundsDetails';
import FundsStatistics from './FundsStatistics';
import useFetchBooksAndAccounts from '@/hooks/useBasicFundsDataHook.js';
import './index.css';
import dayjs from 'dayjs';
const primaryTags = `餐饮、住房、通讯、交通、人情、娱乐、旅游、长辈、医疗、日用、其他、工资、服饰`.split('、');
export default function () {
    const [statistics, setStatistics] = useState([]);
    const [currentBookId, setCurrentBookId] = useState(null);
    const [currentAccountNo, setCurrentAccountNo] = useState(null);
    const [currentMonth, setCurrentMonth] = useState(null);
    const [currentDay, setCurrentDay] = useState(null);
    const [currentTags, setCurrentTags] = useState(null);
    const [accountOptions, setAccountOptions] = useState([]);
    const [tagOptions, setTagOptions] = useState([]);
    const [monthOptions, setMonthOptions] = useState([]);
    const { bookOptions, loading, error, loginUser } = useFetchBooksAndAccounts();
    const loadStatistics = () => {
        get('/api/statistics', {
            bookId: currentBookId,
            accountNo: currentAccountNo,
            month: currentMonth,
            day: currentDay,
            tags: (currentTags || []).join(',')
        }).then(res => setStatistics(res))
    }

    useEffect(() => {
        const bookChildren = bookOptions?.find(opt => opt.value === currentBookId)?.options || [];
        setAccountOptions(bookChildren.find(item => item.value === 'accountNo')?.options || []);
        setTagOptions(bookChildren.find(item => item.value === 'tag')?.options || []);
        setMonthOptions(bookChildren.find(item => item.value === 'month')?.options || []);
    }, [currentBookId, bookOptions]);

    useEffect(() => {
        loadStatistics();
    }, [currentBookId, currentAccountNo, currentTags, currentMonth, currentDay]);

    return (
        <TooltipProvider>
            <div className="h-screen overflow-hidden">
                <div className="fixed top-0 left-0 right-0">
                    <FundsHeader loginUser={loginUser}
                        bookOptions={bookOptions}
                        onBookIdChange={bookId => setCurrentBookId(bookId)}
                        accountOptions={accountOptions}
                        onAccountNoChange={accountNo => setCurrentAccountNo(accountNo)}
                        tagOptions={tagOptions}
                        onTagsChange={tags => setCurrentTags(tags)}
                        primaryTags={primaryTags} />
                </div>
                <div className="mt-14 h-[calc(100%-3.5rem)] overflow-auto">
                    <main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3">
                        <div className="grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2">
                            <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4">
                                <FundsIntro loginUser={loginUser} />
                                <FundsCalendar netIncomeStatistics={statistics.netIncome} bookId={currentBookId} accountNo={currentAccountNo} tags={currentTags} onMonthChange={month => setCurrentMonth(month)} onDateChange={day => setCurrentDay(day)} />
                            </div>
                            <Tabs defaultValue="statistics">
                                <div className="flex items-center">
                                    <TabsList>
                                        <TabsTrigger value="statistics">Statistics {dayjs(currentMonth, 'YYYY-MM').format('YYYY/MM')}</TabsTrigger>
                                        <TabsTrigger value="details">Details {dayjs(currentDay, 'YYYY-MM-DD').format('MM/DD')}</TabsTrigger>
                                    </TabsList>
                                    <div className="ml-auto flex items-center gap-2">
                                    </div>
                                </div>
                                <TabsContent value="statistics">
                                    <FundsStatistics weekStatistics={statistics.week} monthStatistics={statistics.month} day={currentDay} month={currentMonth} />
                                </TabsContent>
                                <TabsContent value="details">
                                    <FundsDetails bookId={currentBookId} accountNo={currentAccountNo} month={currentMonth} day={currentDay} tags={currentTags} primaryTags={primaryTags} />
                                </TabsContent>
                            </Tabs>
                        </div>
                    </main>
                </div>
            </div>
        </TooltipProvider>
    )
}
